<template>
  <div
    class="tooltip tooltip-bottom"
    data-tip="播放音频  快捷键 ctrl 1"
    @click="playAudio(courseStore.getEnglish())"
  >
    <button class="btn btn-sm btn-dash">
      <template v-if="!isMobile()">
        <kbd class="kbd kbd-xs">ctrl</kbd>
        <kbd class="kbd kbd-xs">1</kbd>
      </template>
      播放音频
    </button>
  </div>
</template>

<script setup lang="ts">
import {
  registerShortcut,
  cancelShortcut,
} from "~/composables/user/globalShortcut";
import type { Shortcut } from "~/composables/user/globalShortcut";
import { usePlayAudio } from "~/composables/common/playAudio";
import { isMobile } from "~/composables/common/mobile";
const { playAudio } = usePlayAudio();
import { useCourseStore } from "~/stores/course";
const courseStore = useCourseStore();
const registeredShortcuts: Shortcut[] = [];
onMounted(() => {
  registeredShortcuts.push(
    registerShortcut(
      "ctrl+1",
      (e) => {
        e.preventDefault();
        playAudio(courseStore.getEnglish());
      },
      { priority: "high" }
    )
  );
});
onUnmounted(() => {
  registeredShortcuts.forEach((shortcut) => cancelShortcut(shortcut));
});
</script>
